<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>用 3实现数据可视化(17-)</title>
	</head>
	<!--【引入d3.js库】-->
	<script src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">
		.bar:hover {
		    fill: brown;
		  }
	</style>
</head>
<body>
	<h3>给 D3 元素添加标签</h3>
	<p>
		首先，在svg中添加text节点。<br>
		然后，添加x和y坐标属性，除了text的y值应该使标签比组的高y 3 个单位，其余值的计算方法应该和rect中计算方法一样。
		最后，用 D3 的text()方法将标签的文本设置为和数据点相等的值。
	</p>
	<div id="box17"></div>
	<script src="./17-add-labels-to-d3-elements.js" type="text/javascript"></script>
	<hr>
	<!-- ======================== -->
	<h3>给 D3 标签添加样式</h3>
	<p>将text元素的font-size设置为 25px，文本颜色设置为 red。</p>
	<div id="box18"></div>
	<script src="./18-style-d3-labels.js" type="text/javascript"></script>
	<hr>
	<!-- ======================== -->
	<h3>给 D3 元素添加悬停效果</h3>
	<p>用attr()方法给所有的rect元素都添加bar类。<br>
当鼠标悬浮在一组上时，这将使它的fill颜色变为 brown。</p>
	<div id="box19"></div>
	<script src="./19-add-a-hover-effect-to-a-d3-element.js" type="text/javascript"></script>
	<hr>
	<!-- ======================== -->
	<h3>给 D3 元素添加工具提示</h3>
	<p>在每个rect节点下面添加一个title元素，然后用回调函数调用text()方法使它的文本显示数据值。</p>
	<div id="box20"></div>
	<script src="./20-add-a-tooltip-to-a-d3-element.js" type="text/javascript"></script>
	<hr>
	<!-- ======================== -->
	<h3>使用 SVG Circles 创建散点图</h3>
	<p>使用data()、enter()、append()方法将dataset和新添加到 SVG 画布上的circle元素绑定起来。</p>
	<hr>
	<h3>给 Circle 元素添加属性</h3>
	<p>为circle元素添加cx、cy、r属性。<br>cx的值应该是dataset中每个对象的数组的第一个数，cy的值应该根据数据中的第二个数，但是要确保正向显示图表而不是倒转。<br>所有圆圈的r的值应该为 5。</p>
	<div id="box21"></div>
	<!-- <script src="./21-create-a-scatterplot-with-svg-circles.js" type="text/javascript"></script> -->
		<script src="./22-add-attributes-to-the-circle-elements.js" type="text/javascript"></script>
	<hr>
	<!-- ======================== -->
	<h3>向散点图的 Circles 添加标签</h3>
	<p>用text元素为散点图中的每个点创建标签。<br>标签的文本应该为用一个逗号和一个空格分隔开的两个值<br>例如，第一个点的标签为 "34, 78"。<br>设置x属性比circle的cx属性大 5 个单位，设置y属性和circle的cy属性相同</p>
	<div id="box23"></div>
	<script src="./23-add-labels-to-scatter-plot-circles.js" type="text/javascript"></script>
	<hr>
	<!-- ======================== -->
	<h3>用 D3 创建线性比例</h3>
	<p>改变scale变量的值创建线性缩放，然后将output变量设置为scale函数</p>
	<div id="box24"></div>
	<script src="./24-create-a-linear-scale-with-d3.js" type="text/javascript"></script>
	<hr>
	<!-- ======================== -->
	<h3>按比例设置域和范围</h3>
	<p>创建一个比例尺，将它的域设置为[250, 500]，范围设置为[10, 150]</p>
	<div id="box25"></div>
	<script src="./25-set-a-domain-and-a-range-on-a-scale.js" type="text/javascript"></script>
	<hr>
	<!-- ======================== -->
	<h3>使用 d3.max 和 d3.min 函数在数据集中查找最小值和最大值</h3>
	<p>在positionData变量中保存一个三维数组。<br>用 D3 的方法去找到数组中 z 坐标（第三个值）的最大值并将它保存在output变量中。</p>
	<div id="box26"></div>
	<script src="./26-use-the-d3-max-and-d3-min-functions-to-find-minimum-and-maximum-values-in-a-dataset.js" type="text/javascript"></script>
	<hr>
	<!-- ======================== -->
	<h3>使用动态比例</h3>
	<p>使用yScale变量创建一个线性的 y 轴比例尺。<br>domain应该从 0 开始到数据集中 y 的最大值，range 应该使用 SVG 的高(h)并包含 padding。
		<b>提示：</b>
		记得正向布局。当你为 y 坐标设置 range 时，大的值（height 减去 padding）是第一个参数，小的值是第二个参数。
	</p>
	<div id="box27"></div>
	<script src="./27-use-dynamic-scales.js" type="text/javascript"></script>
	<hr>
	<!-- ======================== -->
	<h3>使用预定义的比例放置元素</h3>
	<p>使用xScale和yScale将circle和text图形放置在 SVG 画布上。<br>对于circles，使用比例尺设置cx和cy属性，半径为 5 个单位。<br>

对于text元素，使用比例尺设置x和y属性。<br>标签应该标注在点的右边，为此，在将 x 数据值传递给xScale之前要将它加上 10 个单位。</p>
	<div id="box28"></div>
	<script src="./28-use-a-pre-defined-scale-to-place-elements.js" type="text/javascript"></script>
	<hr>
	<!-- ======================== -->
	<h3>添加坐标轴到可视化中</h3>
	<p>现在散点图有 x 轴了。<br>用axisLeft方法在变量yAxis中创建 y 轴，然后用g元素渲染 y 轴。<br>确保用transform属性将 y 轴向右平移 padding 个单位，向下平移 0 个单位。记得call() y 轴。</p>
	<div id="box29"></div>
	<script src="./29-add-axes-to-a-visualization.js" type="text/javascript"></script>
	<hr>
	<!-- ======================== -->
	
</body>
</html>